import { Button, Col, Form, Row } from 'antd'
import React from 'react'

const SearchForm: React.FC<any> = props => {
  return (
    <Form form={props.form} labelCol={{ span: 8 }} initialValues={{ ...props.initialValues }}>
      <Row style={{ position: 'relative' }}>
        {props.children.length
          ? props.children.map((item: any, index: number) => (
              <Col lg={6} xs={24} sm={12} key={index}>
                {item}
              </Col>
            ))
          : props.children && (
              <Col lg={6} xs={24} sm={12}>
                {props.children}
              </Col>
            )}
        <Col lg={6} xs={24} sm={12}>
          <Form.Item></Form.Item>
        </Col>
        <Col
          lg={6}
          xs={24}
          sm={12}
          style={{ position: props.children % 4 !== 0 ? 'absolute' : 'static', right: 0, bottom: 0 }}
        >
          <Form.Item>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button type='primary' style={{ marginRight: 8 }} onClick={props.onSubmit}>
                搜索
              </Button>
              <Button onClick={props.onReset}>重置</Button>
            </div>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}

export default SearchForm
